<template>
  <view class="box">
    <view class="content">
      <view class="btn">邀请好友</view>
      <view style="padding:50rpx">
        <view class="weiz">
          <image src="/static/icon/icon.png"></image>
          <view>
            <view class="weiz-top">虹口龙之梦店</view>
            <view class="weiz-bot">距您10m</view>
          </view>
        </view>
        <view class="dianc" v-if="status==1">
          <view class="store-status">
            <text>当前1人，正在选购0人</text>
          </view>
          <view class="user-status">
            <image class="avatar"
              src="https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/15/202411151101113982.png"></image>
            <text class="user-text">微信好友 (我)</text>
            <text class="purchase-status">未选购</text>
          </view>
          <view class="order-box">
            <text class="order-button">立即点餐</text>
          </view>
        </view>
        <view class="dianc" v-if="status==2">
          <view class="store-status">
            <text>当前2人，正在选购1人</text>
          </view>
          <view class="user-status">
            <image class="avatar"
              src="https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/15/202411151101113982.png"></image>
            <text class="user-text">微信好友 (我)</text>
            <text class="purchase-status">已选好</text>
          </view>
          <view class="product-item">
            <view style="display: flex;align-items:center;">
              <image class="product-image"
                src="https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/15/202411151101113982.png"></image>
              <view class="product-details">
                <view class="product-name">巧人开心果冰巧</view>
                <view class="product-description">巧克力与开心果,加冰</view>
              </view>
            </view>
            <view class="product-price">
              <view class="product-name">¥32</view>
              <view class="product-description">×1</view>
            </view>

          </view>
          <view class="order-box">
            <text class="order-button">修改订单</text>
          </view>
        </view>
      </view>
      <view class="cart-summary">
        <view class="cart-con">
          <view class="total-price">¥0</view>
          <view class="price-note">优惠请以最终结算价格为准</view>
        </view>
        <view class="checkout-button" @click="checkout">结算</view>

      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        status: 1
      }
    },
    methods: {

    }
  }
</script>

<style>
  .box {
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
  }

  .content {
    background: url(https://dc.sunchongkeji.com/web/static/yb_wm/1/2024/11/15/202411151101113982.png);
    background-size: 100% 100%;
    width: 100%;
    height: 476rpx;
    padding-top: 70%;
  }

  .btn {
    width: 350rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    background: #303030;
    border-radius: 50rpx;
    font-size: 32rpx;
    color: #ffffff;
    margin: 0 auto;
    font-weight: bold;
  }

  .weiz {
    display: flex;
    align-items: center;
    padding: 30rpx;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  }

  .weiz image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 20rpx;
  }

  .weiz-top {
    font-size: 28rpx;
    color: #202020;
  }

  .weiz-bot {
    font-size: 26rpx;
    color: #e3e3e3;
  }

  .dianc {
    padding: 30rpx;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    margin: 20rpx 0;
  }

  .store-status {
    padding: 10px 0;
    border-bottom: 1rpx solid #e5e5e5;
  }

  .store-status text {
    font-size: 14px;
    color: #666;

  }

  .user-status {
    display: flex;
    align-items: center;
    padding: 20px 0;
  }

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .user-text {
    font-size: 14px;
  }

  .purchase-status {
    margin-left: auto;
    color: #999;
  }

  .order-box {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
  }

  .order-button {
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    border: 1rpx solid #000000;
    border-radius: 20px;
    color: #000;
    font-size: 20rpx;
    text-align: center;

  }

  .cart-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .total-price {
    font-size: 18px;
    color: #333;
  }

  .checkout-button {
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 14px;
    margin-left: 30%;
  }

  .price-note {
    font-size: 12px;
    color: #999;
  }


  .product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .product-image {
    width: 120rpx;
    height: 150rpx;
    margin-right: 20rpx;
  }

  .product-name {
    color: #111111;
    font-size: 32rpx;
  }

  .product-description {
    color: #cacaca;
    font-size: 28rpx;
  }

  .product-price {}
</style>